<template>
  <div>
    <el-input size="small" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
    <el-tree
      :data="data"
      ref="menuTree"
      :highlight-current = "true"
       node-key="id"
       :filter-node-method="filterNode"
       :props="defaultProps"
       @node-click="handleNodeClick"/>
  </div>
</template>

<script>
  import { listCategory} from "@/api/mall/pms/category";
    export default {
        name: "categoryTree",
      data(){
          return{
            filterText: "",
            defaultProps:{
              label: 'name',
              children: 'children'
            },
            loading:false,
            data:[]
          }
      },
      //监控data中的数据变化
      watch: {
        filterText(val) {
          this.$refs.menuTree.filter(val);
        }
      },
      created(){
          this.getList();
      },
      methods:{
        //树节点过滤
        filterNode(value, data) {
          if (!value) return true;
          return data.name.indexOf(value) !== -1;
        },
        handleNodeClick(data, node, component) {
          //向父组件发送事件；
          this.$emit("tree-node-click", data, node, component);
        },
        getList() {
          this.loading = true;
          listCategory().then(response => {
            this.data = this.handleTree(response.data, "id", "parentId");
            this.loading = false;
          }).catch(() => {
            this.loading = false;
          });
        }
      },
    }
</script>

<style scoped>

</style>
